<template>
  <div class="data-import-container">
    <div class="tab-buttons">
      <button :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">历史评估数据加载</button>
      <button :class="{ active: activeTab === 'import' }" @click="activeTab = 'import'">数据导入</button>
      <button :class="{ active: activeTab === 'details' }" @click="activeTab = 'details'">具体信息</button>
      <button :class="{ active: activeTab === 'query' }" @click="activeTab = 'query'">查询</button>
    </div>

    <div class="tab-content">
      <div v-if="activeTab === 'history'">
        <h3>历史评估数据加载内容</h3>
        <!-- Content for History Data Load -->
        <p>这里是历史评估数据加载的相关内容。</p>
        <!-- 可以添加历史记录列表、筛选条件等 -->
        <div class="history-content">
          <h4>历史记录列表</h4>
          <table>
            <thead>
            <tr>
              <th>记录</th>
              <th>日期</th>
              <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>记录 1</td>
              <td>2023-10-26</td>
              <td>成功导入</td>
            </tr>
            <tr>
              <td>记录 2</td>
              <td>2023-10-25</td>
              <td>导入失败</td>
            </tr>
            <tr>
              <td>记录 3</td>
              <td>2023-10-24</td>
              <td>待处理</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div v-if="activeTab === 'import'">
        <h3>数据导入内容</h3>
        <!-- Content for Data Import -->
        <div class="import-area">
          <div class="file-selection">
            <input type="file" ref="fileInput" style="display: none;" @change="handleFileSelect">
            <button @click="selectFile">选择文件</button>
            <span v-if="selectedFile">已选择文件: {{ selectedFile.name }}</span>
          </div>
          <div class="upload-actions">
            <button @click="uploadFile" :disabled="!selectedFile">上传</button>
            <!-- Optional: Add a download template button -->
            <button @click="downloadTemplate">下载模板</button>
          </div>
          <div v-if="uploadComplete" class="open-file-action">
            <button @click="openImportedFile">打开导入文件</button>
          </div>
          <div class="upload-status">
            <!-- Upload progress or status messages -->
            <p>上传状态: {{ uploadStatusMessage }}</p>
            <div v-if="selectedFile && !isParsingComplete" class="progress-bar-container">
              <div class="progress-bar" :style="{ width: uploadProgress + '%' }"></div>
            </div>
          </div>
        </div>
        <div class="data-table-area">
          <h4>导入数据预览</h4>
          <table>
            <thead>
            <tr>
              <!-- Example Headers - replace with actual data headers -->
              <th>ID</th>
              <th>名称</th>
              <th>值</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in tableData" :key="item.ID">
              <td>{{ item.ID }}</td>
              <td>{{ item['名称'] }}</td>
              <td>{{ item['值'] }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div v-if="activeTab === 'details'">
        <h3>具体信息内容</h3>
        <!-- Content for Specific Details -->
        <p>这里是具体信息的相关内容。</p>
        <!-- 可以添加详细信息展示区域，例如图表、详细数据等 -->
        <div class="details-content">
          <h4>详细数据展示</h4>
          <p>这里将展示导入数据的详细分析和统计信息。</p>
          <!-- Placeholder for charts or detailed tables -->
          <div id="echarts-container" style="width: 100%; height: 400px;"></div>
        </div>
      </div>

      <div v-if="activeTab === 'query'" class="query-section">
        <div class="query-header">
          <h3>数据查询</h3>
          <p class="query-description">在此进行数据检索和筛选</p>
        </div>

        <div class="query-filters">
          <el-form :model="queryForm" label-position="top" class="filter-form">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="关键词搜索">
                  <el-input v-model="queryForm.keyword" placeholder="输入关键词"
                            prefix-icon="el-icon-search" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据类型">
                  <el-select v-model="queryForm.dataType" placeholder="选择数据类型" clearable>
                    <el-option label="全部" value=""/>
                    <el-option label="评估数据" value="assessment"/>
                    <el-option label="历史记录" value="history"/>
                    <el-option label="统计报告" value="report"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="时间范围">
                  <el-date-picker v-model="queryForm.dateRange" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD"/>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="query-actions">
              <el-button type="primary" @click="handleSearch" :loading="isSearching">
                <i class="el-icon-search"></i> 搜索
              </el-button>
              <el-button @click="resetQuery">
                <i class="el-icon-refresh"></i> 重置
              </el-button>
            </div>
          </el-form>
        </div>

        <div class="query-results" v-loading="isSearching">
          <div class="results-header">
            <h4>查询结果 <span v-if="totalResults">(共 {{ totalResults }} 条)</span></h4>
            <div class="results-actions">
              <el-button-group>
                <el-button size="small" @click="exportData" :disabled="!filteredTableData.length">
                  <i class="el-icon-download"></i> 导出
                </el-button>
                <el-button size="small" @click="printData" :disabled="!filteredTableData.length">
                  <i class="el-icon-printer"></i> 打印
                </el-button>
              </el-button-group>
            </div>
          </div>

          <el-table :data="filteredTableData" style="width: 100%" border stripe highlight-current-row
                    @sort-change="handleSortChange">
            <el-table-column prop="ID" label="ID" sortable width="100"/>
            <el-table-column prop="名称" label="名称" sortable width="200">
              <template #default="{ row }">
                <el-tooltip :content="row.名称" placement="top" :disabled="row.名称.length < 20">
                  <span>{{ row.名称.length > 20 ? row.名称.slice(0, 20) + '...' : row.名称 }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="类型" label="类型" sortable width="120"/>
            <el-table-column prop="日期" label="日期" sortable width="120"/>
            <el-table-column prop="值" label="值" sortable/>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button-group>
                  <el-button size="small" type="primary" @click="viewDetails(row)">
                    查看
                  </el-button>
                  <el-button size="small" type="danger" @click="deleteRecord(row)">
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                           :page-sizes="[10, 20, 50, 100]" :total="totalResults"
                           layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"/>
          </div>

          <el-empty v-if="!filteredTableData.length" description="暂无数据"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import *  as XLSX from 'xlsx';
import {
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElRow,
  ElCol,
  ElPagination,
  ElEmpty,
  ElTooltip,
  ElButtonGroup,
  ElMessage,
  ElMessageBox
} from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  name: 'DataImport',
  components: {
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElForm,
    ElFormItem,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElRow,
    ElCol,
    ElPagination,
    ElEmpty,
    ElTooltip,
    ElButtonGroup
  },
  data() {
    return {
      activeTab: 'history',
      selectedFile: null,
      uploadStatusMessage: '待上传',
      uploadProgress: 0,
      uploadComplete: false,
      isParsingComplete: false,
      tableData: [],
      // 查询相关数据
      queryForm: {
        keyword: '',
        dataType: '',
        dateRange: null
      },
      isSearching: false,
      currentPage: 1,
      pageSize: 10,
      totalResults: 0,
      sortBy: null,
      sortOrder: null
    };
  },
  computed: {
    filteredTableData() {
      let result = [...this.tableData];

      // 关键词筛选
      if (this.queryForm.keyword) {
        const keyword = this.queryForm.keyword.toLowerCase();
        result = result.filter(item =>
            Object.values(item).some(value =>
                String(value).toLowerCase().includes(keyword)
            )
        );
      }

      // 数据类型筛选
      if (this.queryForm.dataType) {
        result = result.filter(item => item.类型 === this.queryForm.dataType);
      }

      // 日期范围筛选
      if (this.queryForm.dateRange && this.queryForm.dateRange.length === 2) {
        const [startDate, endDate] = this.queryForm.dateRange;
        result = result.filter(item => {
          const itemDate = new Date(item.日期);
          return itemDate >= new Date(startDate) && itemDate <= new Date(endDate);
        });
      }

      // 更新总数
      this.totalResults = result.length;

      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return result.slice(start, end);
    }
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'details' && this.tableData.length > 0) {
        this.$nextTick(() => {
          this.renderChart();
        });
      }
    },
    tableData(newData) {
      if (this.activeTab === 'details' && newData.length > 0) {
        this.$nextTick(() => {
          this.renderChart();
        });
      }
    }
  },
  methods: {
    // 查询相关方法
    handleSearch() {
      this.isSearching = true;
      this.currentPage = 1;
      // 模拟异步搜索
      setTimeout(() => {
        this.isSearching = false;
      }, 500);
    },

    resetQuery() {
      this.queryForm = {
        keyword: '',
        dataType: '',
        dateRange: null
      };
      this.currentPage = 1;
      this.handleSearch();
    },

    handleSortChange({prop, order}) {
      this.sortBy = prop;
      this.sortOrder = order;
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },

    handleCurrentChange(val) {
      this.currentPage = val;
    },

    viewDetails(row) {
      // 实现查看详情的逻辑
      console.log('查看详情:', row);
    },

    deleteRecord(row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实现删除记录的逻辑
        console.log('删除记录:', row);
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    exportData() {
      // 实现导出数据的逻辑
      const data = this.filteredTableData;
      console.log('导出数据:', data);
      this.$message.success('导出成功');
    },

    printData() {
      // 实现打印数据的逻辑
      window.print();
    },

    // 原有的文件处理方法
    selectFile() {
      this.$refs.fileInput.click();
    },
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];
      if (this.selectedFile) {
        console.log('Selected file:', this.selectedFile);
        this.uploadStatusMessage = `已选择文件: ${this.selectedFile.name}`; // Update status message
        this.isParsingComplete = false; // Reset parsing complete flag when a new file is selected
      } else {
        this.uploadStatusMessage = '待上传';
      }
    },
    uploadFile() {
      if (!this.selectedFile) {
        alert('请先选择一个文件');
        return;
      }

      this.uploadStatusMessage = `正在上传: ${this.selectedFile.name}...`; // Update status message
      this.uploadProgress = 0; // Reset progress

      console.log('Uploading file:', this.selectedFile);

      // Simulate upload progress
      const totalSteps = 10;
      let currentStep = 0;
      const interval = setInterval(() => {
        currentStep++;
        this.uploadProgress = (currentStep / totalSteps) * 100;

        if (currentStep === totalSteps) {
          clearInterval(interval);
          this.uploadStatusMessage = `文件 ${this.selectedFile.name} 上传成功`; // Update status message to indicate successful upload
          this.uploadComplete = true; // Mark upload as complete
        }
      }, 100); // Update progress every 100ms
    },
    openImportedFile() {
      if (!this.selectedFile) {
        alert('没有已选择的文件');
        return;
      }

      this.uploadStatusMessage = `正在打开文件: ${this.selectedFile.name}...`; // Update status message
      this.uploadProgress = 0; // Reset progress

      this.uploadStatusMessage = `正在打开文件: ${this.selectedFile.name}...`; // Update status message
      this.uploadProgress = 0; // Reset progress
      this.isParsingComplete = false; // Ensure parsing complete flag is false while processing

      const reader = new FileReader();
      reader.onload = (e) => {
        const fileContent = e.target.result;
        console.log('File content loaded:', fileContent);

        try {
          const fileName = this.selectedFile.name.toLowerCase();
          if (fileName.endsWith('.csv')) {
            this.tableData = this.parseCsvContent(fileContent);
            this.uploadStatusMessage = `文件 ${this.selectedFile.name} 解析成功`;
          } else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
            this.tableData = this.parseXlsxContent(fileContent);
            this.uploadStatusMessage = `文件 ${this.selectedFile.name} 解析成功`;
            this.uploadProgress = 100; // Set progress to 100% on success
            this.isParsingComplete = true; // Mark parsing as complete
          } else if (fileName.endsWith('.pdf') || fileName.endsWith('.doc') || fileName.endsWith('.docx') || fileName.endsWith('.jpg')) {
            // For other file types, just indicate selection/upload readiness
            this.tableData = []; // Clear table data for non-tabular files
            this.uploadStatusMessage = `已选择文件 ${this.selectedFile.name}，该文件类型不支持直接预览`;
            this.uploadProgress = 0; // Reset progress for unsupported types
            this.isParsingComplete = true; // Mark parsing as complete
            // Here you would typically implement actual upload to a backend
            console.log(`File type ${this.selectedFile.type} selected, ready for upload.`);
          } else {
            alert('不支持的文件类型。请选择 CSV, Excel, PDF, Word 或 JPG 文件。');
            this.tableData = [];
            this.uploadStatusMessage = '不支持的文件类型';
            this.uploadProgress = 0; // Reset progress on error
            this.isParsingComplete = true; // Mark parsing as complete
          }
        } catch (error) {
          console.error('Error parsing file:', error);
          alert('文件解析失败: ' + error.message);
          this.tableData = [];
          this.uploadStatusMessage = '文件解析失败';
          this.uploadProgress = 0; // Reset progress on error
          this.isParsingComplete = true; // Mark parsing as complete
        }
      };
      reader.onerror = (e) => {
        console.error('Error reading file:', e);
        alert('读取文件失败');
        this.tableData = [];
        this.uploadStatusMessage = '读取文件失败';
        this.uploadProgress = 0; // Reset progress on error
        this.isParsingComplete = true; // Mark parsing as complete
      };

      const fileName = this.selectedFile.name.toLowerCase();
      if (fileName.endsWith('.csv')) {
        reader.readAsText(this.selectedFile);
      } else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
        reader.readAsArrayBuffer(this.selectedFile);
      } else if (fileName.endsWith('.pdf') || fileName.endsWith('.doc') || fileName.endsWith('.docx') || fileName.endsWith('.jpg')) {
        // For other file types, you might not need to read the content for basic handling
        // If actual upload is needed, you would use FormData and fetch/axios here
        this.uploadStatusMessage = `已选择文件 ${this.selectedFile.name}，等待上传`;
      } else {
        alert('不支持的文件类型。请选择 CSV, Excel, PDF, Word 或 JPG 文件。');
        this.uploadStatusMessage = '不支持的文件类型';
        this.uploadProgress = 0; // Reset progress on error
        this.isParsingComplete = true; // Mark parsing as complete
      }
    },
    parseCsvContent(csvString) {
      const lines = csvString.split('\n');
      const headers = lines[0].split(',').map(header => header.trim());
      const data = [];

      for (let i = 1; i < lines.length; i++) {
        const values = lines[i].split(',').map(value => value.trim());
        if (values.length === headers.length) {
          let row = {};
          headers.forEach((header, index) => {
            row[header] = values[index];
          });
          data.push(row);
        }
      }
      return data;
    },
    parseXlsxContent(arrayBuffer) {
      const workbook = XLSX.read(arrayBuffer, {type: 'array'});
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const json = XLSX.utils.sheet_to_json(worksheet);
      return json;
    },
    // Optional: Add download template method
    downloadTemplate() {
      // Implement template download logic here
      console.log('Downloading template');
      // Example: Create a simple CSV template and trigger download
      const csvContent = "ID,名称,值\n1,示例数据 1,100\n2,示例数据 2,200";
      const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.setAttribute('download', 'template.csv');
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    renderChart() {
      const chartDom = document.getElementById('echarts-container');
      if (!chartDom) {
        console.error('ECharts container not found!');
        return;
      }

      const myChart = echarts.init(chartDom);
      let option;

      // Prepare data for ECharts
      const names = this.tableData.map(item => item['名称']);
      const values = this.tableData.map(item => parseFloat(item['值'])); // Assuming '值' is numeric

      option = {
        title: {
          text: '导入数据统计图'
        },
        tooltip: {},
        xAxis: {
          data: names
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: values,
            itemStyle: {
              color: '#00914D'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      };

      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.data-import-container {
  font-family: 'Arial', sans-serif;
  color: #333;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.tab-buttons {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.tab-buttons button {
  padding: 10px 20px;
  border: none;
  background-color: #e8f5e9;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  color: #333;
  /* Add default text color */
}

.tab-buttons button:hover {
  background-color: #e0e0e0;
}

.tab-buttons button.active {
  background-color: #00914D;
  color: white;
  border-bottom: 2px solid #00914D;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  flex: 1;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin-right: 2px;
}

/* Add styles for the new content areas */
.history-content,
.import-area,
.details-content,
.query-content {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.import-area .file-selection,
.import-area .upload-actions,
.import-area .upload-status {
  margin-bottom: 10px;
}

.import-area button {
  margin-right: 10px;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.import-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.import-area button:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.query-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.query-header {
  margin-bottom: 24px;
}

.query-header h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 8px 0;
}

.query-description {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.query-filters {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px;
}

.filter-form .el-form-item__label {
  font-weight: 500;
  color: #333;
}

.query-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.query-actions .el-button {
  margin-left: 12px;
}

.query-results {
  margin-top: 24px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.results-header h4 {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.results-header span {
  color: #666;
  font-size: 14px;
  font-weight: normal;
}

.results-actions {
  display: flex;
  gap: 8px;
}

.el-table {
  margin-bottom: 16px;
  border-radius: 4px;
}

.el-table th {
  background-color: #f8f9fa !important;
  color: #333;
  font-weight: 500;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.el-empty {
  padding: 40px 0;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .query-section {
    padding: 16px;
  }

  .query-filters {
    padding: 16px;
  }

  .el-form-item {
    margin-bottom: 16px;
  }

  .results-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .pagination-container {
    justify-content: center;
  }
}

.history-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.history-content th,
.history-content td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.history-content th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.history-content tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.history-content tbody tr:hover {
  background-color: #e9e9e9;
}

.data-table-area {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
}

.data-table-area table {
  width: 100%;
  border-collapse: collapse;
}

.data-table-area th,
.data-table-area td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.data-table-area th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.data-table-area tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table-area tbody tr:hover {
  background-color: #e9e9e9;
}

.data-table-area .data-table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f2f2f2;
}

.progress-bar-container {
  width: 100%;
  background-color: #f3f3f3;
  border-radius: 5px;
  margin-top: 5px;
}

.progress-bar {
  height: 20px;
  background-color: #00914D;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  color: white;
  transition: width 0.4s ease;
}

.enhanced-query-content {
  margin-top: 20px;
  padding: 32px 32px 24px 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.query-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 28px;
  color: #222;
  letter-spacing: 1px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.enhanced-query-input {
  width: 240px;
  min-width: 120px;
  flex-shrink: 0;
}

.enhanced-query-btn {
  min-width: 80px;
}

.enhanced-query-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
</style>
